<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/custom.css" rel="stylesheet"/>
    <script src="/jquery-1.8.0.js" charset="utf-8"></script>
    <!--vue-->
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <!--axios ajax-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <meta charset="UTF-8">
    <title>自定义采集URL列表</title>
</head>
<body>

<br>
<div id="app">
    <form>
        添加url地址:<input type="text" v-model="url">
        <input type="button" @click="save" value="提交"><input type="button" @click="deleteAll" value="全部删除">
        <input type="button" @click="deleteSelected" value="删除选中">
    </form>
    <br>
    <table>
        <!--<caption>URL列表</caption>-->
        <thead><!--表格头-->
        <tr>
            <!--<th><input id="checkAll" type="checkbox"></th>-->
            <th><input type="checkbox" @click="selectAll">全选</th>
            <th>id</th> <!--加粗标题-->
            <th>url标题</th>
            <th>url地址</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>爬取次数</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody><!--表格体-->
        <tr v-for="url in customUrls">
            <td><input type="checkbox" :value='url.id'></td>
            <td>{{url.id}}</td>
            <td>{{url.title}}</td>
            <td><a :href="url.url" target="_blank">{{url.url}}</a></td>
            <td> {{url.createTime}}</td>
            <td>{{url.updateTime}}</td>
            <td>{{url.spiderCount}}</td>
            <td>
                <a @click="deleteUrl(url.id)">删除</a>&nbsp;&nbsp;
                <a @click="spider(url.id)">爬取</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>

<script>
    var check = false;
    var vm = new Vue({
        el: "#app",
        data: {
            url: '',
            message: '',
            customUrls: []
        },
        methods: {
            save: function () {
                axios.post('/seedUrls?url=' + this.url).then(
                    function (res) {
                        vm.list();
                        vm.message = '提交URL地址成功';
                    }
                );
            },
            list: function () {
                axios.get('/seedUrls').then(function (res) {
                    vm.customUrls = res.data;
                    console.log(vm.customUrls);
                    // checkbox init false
                    $("input[type='checkbox']").attr("checked", false);
                    check = false;
                    console.log("-----init checkbox false-----");
                })
            },
            deleteUrl: function (id) {
                console.log("id:" + id);
                console.log("delete method");
                axios.delete('/seedUrls/' + id).then(function (res) {
                    vm.list();
                });
            },
            spider: function (id) {
                console.log("id:" + id)
                console.log("spider method");
                axios.post('/seedUrls/' + id + '/spider').then(function (res) {
                    vm.list();
                });
            },
            deleteAll: function () {
                axios.post('/seedUrls/deleteAll').then(function (res) {
                    vm.list();
                })
            },
            deleteSelected: function () {
                var ids = [];
                $("input[type='checkbox']:checked").map(function () {
                    var value = $(this).val();
                    // 排除全选项
                    if (value != "on") {
                        ids.push({
                            id: value
                        });
                    }
                    return;
                })
                console.log(ids);
                axios.post('/seedUrls/deleteSelected', ids)
                    .then(function (res) {
                        vm.list();
                    })
            },
            selectAll: function () {
                if (check == false) {
                    $("input[type='checkbox']").attr("checked", true);
                    check = true;
                } else {
                    $("input[type='checkbox']").attr("checked", false);
                    check = false;
                }
                console.log("select all, check:" + check);
            }
        }
    })
    vm.list();

    // $(function () {
    //     spider = function (o) {
    //         var url = o.getAttribute("value");
    //         alert(url);
    //         $.ajax({
    //             url:"/custom/spider?url="+url,
    //             type:"get",
    //             async:false,
    //             success:function (result) {
    //                 alert(result);
    //                 $("#msg").html(result);
    //             },
    //             error:function (result) {
    //                 alert("获取失败");
    //                 $("#msg").style = "color:red";
    //                 $("#msg").html("获取失败");
    //             }
    //         }
    //     )}

    // var check = false;
    // $("#checkAll").click(function () {
    //     // alert("click");
    //     if (check == false) {
    //         $("input[type='checkbox']").attr("checked", true);
    //         check = true;
    //     } else {
    //         $("input[type='checkbox']").attr("checked", false);
    //         check = false;
    //     }
    // });

    // $("#deleteSelected").click(function () {
    //     var ids = $("input[type='checkbox']:checked").map(function () {
    //         var value = $(this).val();
    //         if (value != "on") {
    //             return value;
    //         }
    //         return;
    //     }).get().join(",");
    //     alert(ids);
    //     window.location.href = "/custom/delete?ids=" + ids;
    // });
    // })

</script>
</html>